昨天我們把落單的 UI 元件跟其模組關聯完之後，今天接著要來設定路由的部份！

開始設定路由前，可以先看看我們準備好的路徑定義檔 － app-path.const.ts ：

export const appPath = {

  // 首頁
  home: '',

  // 甜點
  products: 'products',

  // 登入
  login: 'login',

  // 購物車
  cart: 'cart',

  // 結帳
  checkout: 'checkout',

  // 結帳流程
  checkoutFlow: {

    // 運送
    customerInfo: 'customer-info',

    // 付款
    paymentInfo: 'payment-info',

    // 發票
    receiptInfo: 'receipt-info'

  },

  // 結帳成功
  success: 'success'

};

之所以會建立這個定義檔是因為不希望 Coding 的時候要在程式碼裡到處 Hard Code ，容易打錯字又不好維護。既然是會重複用到的東西，我們就把它寫成定義檔，以後要維護或是要調整的時候也會比較好處理。

雖然這個專案應該是不會需要被維護，但好的習慣很重要！

複習一下我們所規劃的路由：

按照我們原本所規劃的路由來設定的話，應該會長這樣：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Constant
import { appPath } from './app-path.const';

// for Angular 7 以下
const routes: Routes = [
  {
    path: appPath.home,
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: appPath.products,
    loadChildren: './product-section/product-section.module#ProductSectionModule'
  },
  {
    path: appPath.login,
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: appPath.cart,
    loadChildren: './cart/cart.module#CartModule'
  },
  {
    path: appPath.checkout,
    loadChildren: './checkout/checkout.module#CheckoutModule'
  },
  {
    path: appPath.success,
    loadChildren: './success/success.module#SuccessModule'
  },
  {
    path: '**',
    redirectTo: appPath.home,
    pathMatch: 'full'
  }
];

// for Angular 8 以上
const routes: Routes = [
  {
    path: appPath.home,
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: appPath.products,
    loadChildren: () => import('./product-section/product-section.module').then(m => m.ProductSectionModule)
  },
  {
    path: appPath.login,
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  {
    path: appPath.cart,
    loadChildren: () => import('./cart/cart.module').then(m => m.CartModule)
  },
  {
    path: appPath.checkout,
    loadChildren: () => import('./checkout/checkout.module').then(m => m.CheckoutModule)
  },
  {
    path: appPath.success,
    loadChildren: () => import('./success/success.module').then(m => m.SuccessModule)
  },
  {
    path: '**',
    redirectTo: appPath.home,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

用路徑定義檔來設定路由是不是清爽多啦？！未來就算路徑要變動，也只要修改定義檔裡的定義就好，不需要到處去尋找還有哪個地方沒有改到。

記得加上預先載入的設定，避免檔案變大之後，初次換頁時會有頓頓的感覺。

另外我們這次使用預設的 PathLocationStrategy 路由策略，注意網址後面不要有 # 噢！

然後我們再到各模組裡處理自己的路由：

• HomeRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

• ProductSectionRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProductSectionComponent } from './product-section.component';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  {
    path: '',
    component: ProductSectionComponent,
    children: [
      {
        path: ':type',
        component: ProductListComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductSectionRoutingModule { }

• LoginRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

• CartRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CartComponent } from './cart.component';

const routes: Routes = [
  {
    path: '',
    component: CartComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CartRoutingModule { }

• SuccessRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SuccessComponent } from './success.component';

const routes: Routes = [
  {
    path: '',
    component: SuccessComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SuccessRoutingModule { }

• 最後是稍微比較複雜一點點的 CheckoutRoutingModule ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Constant
import { appPath } from '../app-path.const';

// Component
import { CheckoutComponent } from './checkout.component';
import { CustomerInfoComponent } from './customer-info/customer-info.component';
import { PaymentInfoComponent } from './payment-info/payment-info.component';
import { ReceiptInfoComponent } from './receipt-info/receipt-info.component';

const routes: Routes = [
  {
    path: '',
    component: CheckoutComponent,
    children: [
      {
        path: '',
        redirectTo: appPath.checkoutFlow.customerInfo,
        pathMatch: 'full'
      },
      {
        path: appPath.checkoutFlow.customerInfo,
        component: CustomerInfoComponent
      },
      {
        path: appPath.checkoutFlow.paymentInfo,
        component: PaymentInfoComponent
      },
      {
        path: appPath.checkoutFlow.receiptInfo,
        component: ReceiptInfoComponent
      },
      {
        path: '**',
        redirectTo: appPath.checkoutFlow.customerInfo,
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CheckoutRoutingModule { }

如此一來我們應該已經大致上將所有路由都設定完了，趕快來驗證一下我們設的路由有沒有問題。

首先我們先打開 app.component.ts 檔，將裡面的程式碼改成這樣：

import { Component } from '@angular/core';

// Constant
import { appPath } from './app-path.const';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  /**
   * 給 Template 用的路由定義
   *
   * @memberof AppComponent
   */
  path = appPath;

}

然後再將 app.component.html 裡的 Template 改成這樣：

<ul>
  <li><a [routerLink]="path.home">Home</a></li>
  <li><a [routerLink]="path.login">Login</a></li>
  <li><a [routerLink]="[path.products, 'all']">Products</a></li> 
  <li><a [routerLink]="path.cart">Cart</a></li>
  <li><a [routerLink]="path.checkout">Checkout</a></li>
  <li><a [routerLink]="path.success">Success</a></li>
</ul>

<router-outlet></router-outlet>

最後再到 product-section.component.html 跟 checkout.component.html 裡加入路由插座 <router-outlet></router-outlet> ：

<p>
  product-section works!
</p>

<router-outlet></router-outlet>

<p>
  checkout works!
</p>

<router-outlet></router-outlet>

設定完成！！

如果我們的設定沒有任何問題的話，應該可以看到像這樣子的效果：

除了都能正常導頁之外，有注意到網址沒有 # 了嗎？！這是因為這次我們採用預設的 PathLocationStrategy 路由策略的關係。

所以如果設定完之後但沒有看到畫面時先別緊張，檢查一下你的 URL 是不是含有 # 。

如果有，拿掉之後再看看有沒有恢復正常；如果沒有，趕快留言告訴我你的問題吧！！

關於路由的設定就先到這邊，接下來要開始套版囉！！

我們明天見！！